/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <span class="odometer" @click="bindEvent"></span>
</template>

<style scoped>
</style>

<script lang=ts>

/**
     * 数字滚动动画组件
     */

import Odometer from 'odometer';
import 'odometer/themes/odometer-theme-default.css';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'IOdometer'
})
export default class OdometerComp extends Vue {
    @Prop({
        type: Number,
        required: false,
        'default': 0
    }) private value!: number
    @Prop({
        type: String,
        required: false
    }) format!: string
    @Prop({
        type: String,
        required: false,
        'default': 'default'
    }) private theme!: string
    @Prop({
        type: Number,
        required: false
    }) private duration!: number
    @Prop({
        type: String,
        required: false
    }) private animation!: string
    @Prop({
        type: Function,
        required: false
    }) private formatFunction!: Function

    instance: SafeAny = void 0
    @Watch('value', { deep: false})
    valueChange (value: number) {
        let vm = this;

        if (vm.instance && vm.instance.update) {
            vm.instance.update(value);
        }
    }
    initOdometer () {
        if (window.odometerOptions) {
            window.odometerOptions.auto = false;
        } else {
            window.odometerOptions = {
                auto: false
            };
        }
    }
    bindEvent () {
        let vm = this;

        vm.$emit('click');
    }
    private init () {
        let vm = this;
        vm.initOdometer();

        if (!vm.instance) {
            let dom = vm.$el;

            vm.instance = new Odometer({
                el: dom,
                value: vm.value,
                format: vm.format,
                theme: vm.theme,
                duration: vm.duration,
                animation: vm.animation,
                formatFunction: vm.formatFunction
            });
            vm.instance.render();
        }
    }
    destroy () {
        let vm = this;
        vm.instance = null;
    }

    mounted () {
        let vm = this;
        vm.init();
    }

    beforeDestroy () {
        let vm = this;
        vm.destroy();
    }
};
</script>